<template>
  <div>
    <city-header></city-header>
    <city-search :citys="citys"></city-search>
    <city-list :hotcity="hotcity" :citys="citys" :letter="letter"></city-list>
    <city-ping :citys="citys" @change="cityPingChange"></city-ping>
  </div>
</template>

<script>
  import cityHeader from './components/cityHeader'
  import citySearch from './components/citySearch'
  import cityList from './components/cityList'
  import cityPing from './components/cityPing'
  import axios from 'axios'
    export default {
        name: "city",
        components:{
          CityHeader:cityHeader,
          CitySearch:citySearch,
          CityList:cityList,
          CityPing:cityPing
        },
        data (){
          return {
            hotcity:[],
            citys:{},
            letter:""
          }
        },
        methods:{
          getCityInfo (){
            axios.get('../../../static/mock/city.json')
              .then(this.getCityInfoSuccess)
          },
          getCityInfoSuccess(res){
            res = res.data
            if(res.ret&&res.data){
              const data = res.data
              this.hotcity = data.hotCities
              this.citys = data.cities
            }
          },
          cityPingChange (letter){
            this.letter = letter
          }
        },
        mounted (){
          this.getCityInfo()
        }
    }
</script>

<style scoped lang="stylus">

</style>
